import { Box, HorizontalStack, Text, VerticalStack } from '@shopify/polaris'
import React, { useEffect, useState } from 'react'

const ReportHeader = ({ userName, organizationName, currentDate, setUserName, setOrganizationName }) => {
    const [isEditingOrgName, setIsEditingOrgName] = useState(false)
    const [isEditingSecondLine, setIsEditingSecondLine] = useState(false)

    const [tempOrgName, setTempOrgName] = useState(organizationName)
    const [tempSecondLine, setTempSecondLine] = useState(
        window.location.pathname.includes('issues')
            ? `by @${userName}`
            : `On ${currentDate} by @${userName}`
    )

    useEffect(() => {
        const isIssuesPage = window.location.pathname.includes('issues')
        const defaultLine = isIssuesPage ? `by @${userName}` : `On ${currentDate} by @${userName}`
    
        // Only update if not editing and temp line still has "-"
        if (!isEditingSecondLine && tempSecondLine.includes('-')) {
            setTempSecondLine(defaultLine)
        }
    }, [currentDate])

    const handleOnClick = (type) => {
        if (type === 'orgname') {
            setIsEditingOrgName(true)
        } else if (type === 'secondline') {
            setIsEditingSecondLine(true)
        }
    }

    const handleSave = (type) => {
        if (type === 'orgname') {
            setOrganizationName(tempOrgName)
            setIsEditingOrgName(false)
        } else if (type === 'secondline') {
            const match = tempSecondLine.match(/@(\w+)/)
            if (match) {
                setUserName(match[1])
            }
            setIsEditingSecondLine(false)
        }
    }

    const handleBlurOrEnter = (e, type) => {
        if (e.type === 'blur' || e.key === 'Enter') {
            handleSave(type)
        }
    }

    return (
        <div className='report-cover-page-container'>
            <img src='/public/vul_report_bg.svg' alt="Header Image" className='report-cover-page' />
            <img src='/public/white_logo.svg' alt='akt-logo' className='report-akto-logo'></img>
            <div className='report-cover-page-content'>
                <Box width="100%">
                    <HorizontalStack align="space-between">
                        <VerticalStack gap={'5'}>
                            <div className='report-default-heading'>Vulnerability Report</div>
                            <div className="heading-text">
                                <Text variant="heading4xl">
                                    {isEditingOrgName ? (
                                        <input
                                            style={{ fontSize: '64px' }}
                                            type="text"
                                            value={tempOrgName}
                                            onChange={(e) => setTempOrgName(e.target.value)}
                                            onBlur={(e) => handleBlurOrEnter(e, 'orgname')}
                                            onKeyDown={(e) => handleBlurOrEnter(e, 'orgname')}
                                            autoFocus
                                            className="editable-input"
                                        />
                                    ) : (
                                        <span
                                            onClick={() => handleOnClick('orgname')}
                                            id='organization-name'
                                        >
                                            {organizationName}
                                        </span>
                                    )}{' '}
                                    API Security Findings
                                </Text>
                            </div>

                            <Text variant="bodyMd">
                                {isEditingSecondLine ? (
                                    <input
                                        type="text"
                                        value={tempSecondLine}
                                        onChange={(e) => setTempSecondLine(e.target.value)}
                                        onBlur={(e) => handleBlurOrEnter(e, 'secondline')}
                                        onKeyDown={(e) => handleBlurOrEnter(e, 'secondline')}
                                        autoFocus
                                        className="editable-input"
                                        style={{ width: '100%' }}
                                    />
                                ) : (
                                    <span
                                        onClick={() => handleOnClick('secondline')}
                                        id='second-line-wrapper'
                                        className='semibold-subtext-info'
                                    >
                                        {tempSecondLine}
                                    </span>
                                )}
                            </Text>

                        </VerticalStack>
                    </HorizontalStack>
                </Box>
            </div>
        </div>
    )
}

export default ReportHeader